<template>
    <div>
        <!--
          组件使用：
          1、结构
            存储格式：//{name:XXX,url:XXX}
          2、逻辑
          2个数据，1是本地数据fileUrlArr,2是存储到数据库的格式数据fileListOrg。各种操作下同时更新这2种数据，确保一直
        -->
        <el-upload
            list-type="picture-card"
            :disabled=false
            :action="action"
            :file-list="fileListOrg"
            :multiple="fileConfig.multiple"
            :headers="fileConfig.headers"
            :limit="fileConfig.limit"
            :auto-upload="fileConfig.autoUpload"
            :on-success="fileSuccess"
            :on-remove="fileRemove"
            :on-error="fileError"
            :on-exceed="limitNum"
            :before-upload="beforeAvatarUpload"
        >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Array,
        }
    },
    action() {
        return this.sid ? `/api/upload/site/${this.sid}` : '/api/upload/local'
    },
    data() {
        return {
            fileSuccessNum: 0, // 多个文件时，上传成功的文件数量
            disabled: false, // 是否禁用上传组件，只做展示
            fileListOrg: [], // 文件原列表（本地文件）
            fileUrlArr: [], // 文件上传成功后，存储文件路径
            fileConfig: { // 文件上传相关配置
                multiple: false,
                limit: 5,
                headers: {
                    Authorization: `Bearer ${window.localStorage.getItem('token')}`,
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                autoUpload: true
            }
        }
    },
    //用于判断初始值到达时自动从新渲染组件，用到了getter和setter，因此需要用到watch监听
    watch: {
        value(n, o) {
            if (n !== o && n !== 'undefined') {
                this.showImg(this.value)
            }
        }
    },
    computed: {
        action() {
            return this.sid ? `/api/upload/site/${this.sid}` : '/api/upload/local'
        }
    },

    methods: {
        showImg: function (value) {
            let showList = []
            let fileUrlArr = []

            value.forEach((item, index) => {
                showList.push({
                    uid: new Date().getTime() + index,
                    name: item.name,
                    status: 'success',
                    url: item.url
                })
                fileUrlArr.push({
                    name: item.name,
                    url: item.url
                })
            })
            this.fileListOrg = showList;
            this.fileUrlArr = fileUrlArr
        },

        fileSuccess: function (res, file, fileList) {
            //res是唯一返回res包裹的模型数据
            //目标就是一个name和url地址的对象。并且用数组包裹
            this.fileUrlArr.push({
                name: file.response.name,
                url: file.response.path
            })
            //1-添加本地文件
            this.fileListOrg.push({
                uid: new Date().getTime(),
                name: file.response.name,
                status: 'success',
                url: file.response.path
            })

            //2-提交数据库目标文件到form表单
            this.$emit('updateimage', this.fileUrlArr)
        },

        fileRemove: function (file, fileList) {
            let index = this.fileListOrg.findIndex(item => item.name === file.name)
            if (index != -1) {
                this.fileListOrg.splice(index, 1)//刪除本地数据
                this.fileUrlArr.splice(index, 1)//删除目标数据
            }
            this.$emit('updateimage', this.fileUrlArr)
        },

        fileError: function (e) {
            console.log('文件上传出错！')
        },
        limitNum: function () {
            this.$message({
                message: `最多可上传${this.fileConfig.limit}张图片`,
                type: 'error'
            })
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }

}
</script>

<style scoped>

</style>
